<template>
  <div>
    <el-dialog title="处理" :visible.sync="detailVisible" width="60%">
      <div class="title">VIN: {{ vin }}</div>
      <div class="sections">
        <div v-for="item in list" :key="item.id" class="alarmContainer">
          <div v-for="fileds in recordFileds" :key="fileds.key" class="alarmItem">
            <div v-if="fileds.key === 'alarmValid'">
              <span class="detailTitle">{{ fileds.lable }}：</span>
              <span>{{ item[fileds.key] === 1 ? '是' : '否' }}</span>
            </div>
            <div v-else>
              <span class="detailTitle">{{ fileds.lable }}：</span>
              <span>{{ item[fileds.key] }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="detailVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryHistory } from '@/api/crossRegionalMonitoring'
import { alarmTypeMap } from '@/utils/public'
export default {
  name: 'AlramCounts',
  data() {
    return {
      alarmTypeMap,
      detailVisible: false,
      vin: '',
      detailData: {},
      list: [],
      recordFileds: [
        { lable: '报警时间', key: 'alarmTime' },
        { lable: '报警类型', key: 'alarmType' },
        { lable: '解除报警原因', key: 'relieveAlarmCause' },
        { lable: '店代码', key: 'dealerCode' },
        { lable: '店简称', key: 'dealerShortName' },
        { lable: '电子围栏名称', key: 'fenceName' },
        { lable: '解除报警时间', key: 'handleTime' },
        { lable: '是否有效报警', key: 'alarmValid' }
      ]
    }
  },
  created() {
    // this.queryHistoryList()
  },
  methods: {
    async queryAlarmCounts(params) {
      this.vin = params.vin
      this.detailVisible = true
      const { data } = await queryHistory(params)
      const items = data
      this.list = items.list
    }
  }
}
</script>
<style lang="scss" scoped>
  .title{
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #282828;
    text-align: left;
    line-height: 18px;
    margin-bottom: 20px;
  }
  .sections {
    width: 100%;
    max-height: 500px;
    overflow-y: scroll;
    .alarmContainer {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0px;
        border-bottom: 1px solid #e8e8e8;
        .alarmItem{
            width: 33%;
            min-height: 40px;
            .detailTitle{
                font-weight: bold;
                display: inline-block;
                max-width: 120px;
                min-width: 60px;
            }
        }
    }
  }
</style>
